import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { Index } from './pages/Index/Index';
import { ErrorPage } from './pages/ErrorPage/ErrorPage';
import { UserManage } from './pages/UserManage/UserManage';
import { Login } from './pages/Login/Login';
import { Menu } from './pages/Menu/Menu';
import { ModifyMenu } from './pages/ModifyMenu/ModifyMenu';
import { InfoModify } from './pages/InfoModify/InfoModify';
import { PasswordModify } from './pages/PasswordModify/PasswordModify';
import { MeetingRoomManage } from './pages/MeetingRoomManage/MeetingRoomManage';
import { BookingManage } from './pages/BookingManage/BookingManage';
import { Statistics } from './pages/Statistics/Statistics';
import { ConfigProvider,Spin } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import {lazy, Suspense} from 'react';


const lazyLoad = (factory: () => Promise<any>) => {
  const Module = lazy(factory)
  return (
    <Suspense fallback={<Spin size="large" style={{display: 'flex', justifyContent:'center', alignItems: 'center', width: '100vw',height: '100vh'}}/>}>
      <Module />
    </Suspense>
  )
}

// const lazyLoad2 = async (importFunc: () => Promise<any>) => {
//   const component = await importFunc();
//   return {
//     Component: component.default,
//   };
// };

const routes = [
  {
    path: "/",
    // element: lazyLoad(() => import('./pages/Index/Index')),
    element: <Index/>,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/",
        element: lazyLoad(()=>import('./pages/Menu/Menu')),
        children: [
          {
            path: '/',
            element: lazyLoad(()=>import('./pages/MeetingRoomManage/MeetingRoomManage')),
          },
          {
            path: 'user_manage',
            element: lazyLoad(()=>import('./pages/UserManage/UserManage')),
          },
          {
            path: 'meeting_room_manage',
            element: lazyLoad(()=>import('./pages/MeetingRoomManage/MeetingRoomManage')),
          },
          {
            path: 'booking_manage',
            element: lazyLoad(()=>import('./pages/BookingManage/BookingManage')),
          },
          {
            path: 'statistics',
            element: lazyLoad(()=>import('./pages/Statistics/Statistics')),
          }
        ]
      },
      {
        path: "user",
        element: lazyLoad(() => import('./pages/ModifyMenu/ModifyMenu')),
        // async lazy() {
        //   return await lazyLoad2(() => import("./pages/ModifyMenu/ModifyMenu"))
        // },
        children: [
          {
            path: 'info_modify',
            element: lazyLoad(() => import('./pages/InfoModify/InfoModify')),
          },
          {
            path: 'password_modify',
            element: lazyLoad(() => import('./pages/PasswordModify/PasswordModify')),
          },
        ]
      },
    ]
  },
  {
    path: "login",
    element: lazyLoad(() => import('./pages/Login/Login')),
  }
];

//判断是开发环境还是生产环境
const isProduction = process.env.NODE_ENV === 'production';
const basename = isProduction ? "/admin-meeting/" : "/";
export const router = createBrowserRouter(routes,{
  basename
});
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const App = <ConfigProvider locale={zhCN}>
  <RouterProvider router={router}/>
</ConfigProvider>

root.render(App);
